<script setup lang="ts">
import {message} from "ant-design-vue";
import {WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";

// 批量修改人群溢价
import WxtModal from "~/contentScripts/views/wxt/wxt-modal.vue";

const title = '批量修改人群溢价';
const props = defineProps({
  crowds: {
    type: Array,
    default: () => [],
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
});
const emit = defineEmits(['refresh']);
const dataSource = ref<any[]>([]);
const visible = ref(false);
const handle = () => {
  if (props.crowds.length === 0) {
    message.error('请勾选需要修改溢价的人群!');
    return;
  }
  dataSource.value = props.crowds.map((c: any) => {
    return {
      ...c,
      price: {
        ...c.price,
        currentDiscount: c.price.discount
      },
    }
  });
  visible.value = true;
}
const columns = [
  {
    title: '人群',
    dataIndex: 'crowd.crowdName',
    width: 200,
    fixed: 'left',
  },
  {
    title: '当前溢价',
    dataIndex: 'price.currentDiscount',
  },
  {
    dataIndex: 'price.discount',
    title: '溢价',
    dataType: 'custom',
    slot: 'discount',
  },
  {
    title: '操作',
    dataIndex: 'action',
    dataType: 'custom',
    slot: 'action',
    width: 120,
  }
]
const discount = ref(undefined);
const modify = () => {
  let crowdList = dataSource.value.map((d: any) => {
    return {
      adgroupId: d.adgroupId,
      campaignId: d.campaignId,
      crowd: {
        crowdId: d.crowd.crowdId,
      },
      crowdId: d.crowd.crowdId,
      price: {
        discount: d.price.discount,
      },
    }
  });
  WxtUtils.customRequest('https://one.alimama.com/crowd/horizontal/modifyDiscount.json', props.bizCode, {
    crowdList,
  }).then(() => {
    visible.value = false;
    message.success('修改成功!');
    emit('refresh');
  })
}
</script>

<template>
  <div @click="handle" style="display: inline-block">
    <slot>
      <a-button type="primary" ghost size="small">批量修改溢价</a-button>
    </slot>
  </div>
  <wxt-modal v-model:visible="visible" :title="title" :width="1500">
    <base-table :data-source="dataSource" :columns="columns">
      <template #header>
        <div></div>
      </template>
      <template #discount="record">
        <a-input-number :value="record.price.discount" @change="(e)=>{
          // 修改dataSouce中的值
          const index = dataSource.findIndex((d) => d.id === record.id);
          dataSource[index].price.discount = e;
        }" :min="0" :step="0.1"
                        placeholder="请输入溢价"
        >
          <template #addonAfter>
            %
          </template>
        </a-input-number>
      </template>
      <template #action="record">
        <a-button type="primary" danger @click="()=>{
          // 修改dataSouce中的值
          const index = dataSource.findIndex((d) => d.id === record.id);
          // 从dataSource中删除
          dataSource.splice(index, 1);
        }"
        >删除
        </a-button>
      </template>
    </base-table>
    <a-divider style="margin-top: 10px;"/>
    <a-row type="flex">
      <a-col flex="1">
        <a-space>

          批量修改溢价:
          <a-input-number v-model:value="discount" :min="0" :step="0.1" placeholder="请输入溢价">
            <template #addonAfter>
              %
            </template>
          </a-input-number>
          <a-button type="primary" @click="()=>{
            dataSource.forEach((d) => {
              d.price.discount = discount;
            });
          }"
          >应用
          </a-button>
        </a-space>
      </a-col>
      <a-col>
        <a-space>
          <a-button type="default" @click="()=>{
            visible = false;
          }"
          >取消
          </a-button>
          <a-button type="primary" @click="modify">确定</a-button>
        </a-space>
      </a-col>
    </a-row>
  </wxt-modal>
</template>

<style scoped>

</style>
